<template>
	<el-container>
	  <el-header>
		  你好，专家
	  </el-header>
	  <el-container>
	    <el-aside width="width" class="div1">			
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			  <el-radio-button :label="false">展开</el-radio-button><br>
			  <el-radio-button :label="true">收起</el-radio-button>
			</el-radio-group>
			<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
				<router-link to="/professor_kb">
					<el-menu-item index="1">				  
						<i class="el-icon-document"></i>									  
						<span slot="title">专家看板</span>				  			   
					</el-menu-item>
			  </router-link>
			  <router-link to="/professor_zjxx">
			    <el-menu-item index="2">					
					<i class="el-icon-menu"></i>											
					<span slot="title">专家信息</span>		
				</el-menu-item>
			  </router-link>	
			  <el-submenu index="3">
			    <template slot="title">
			      <i class="el-icon-location"></i>
			      <span slot="title">专家档案</span>
			    </template>
			    <el-submenu index="3-1">
			      <span slot="title">经历</span>
					<router-link to="/professor_jyjl">
						<el-menu-item index="3-1-1">教育经历</el-menu-item>
					</router-link>
					<router-link to="/professor_pxjl">
						<el-menu-item index="3-1-2">培训经历</el-menu-item>
					</router-link>
					<router-link to="/professor_gzjl">
					  <el-menu-item index="3-1-3">工作经历</el-menu-item>
					</router-link>
			    </el-submenu>
			        <el-submenu index="3-2">
			      <span slot="title">技能</span>
				  <router-link to="/professor_zyjn">
					  <el-menu-item index="3-2-1">专业技能</el-menu-item>
					</router-link>			     
			    </el-submenu>
			  </el-submenu>
			<router-link to="/professor_jlpg">
			  <el-menu-item index="4">
			    <i class="el-icon-setting"></i>				
					<span slot="title">评估简历</span>							   
			  </el-menu-item>
			  </router-link>
			</el-menu>
		</el-aside>
	    <el-main>
			<router-view/>	
		</el-main>
	  </el-container>
	</el-container>
	
		
</template>

<script>
		export default {
	    data() {
	      return {
	        isCollapse: true,
			width:100
	      };
	    },
	    methods: {
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
			width:200
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
			
	      }
	    }
	  }
</script>

<style>		
	  .el-header {
	      background-color: #B3C0D1;
	      color: #333;
	      text-align: center;
	      line-height: 60px;
	    }
	    
	    .el-aside {
	      background-color: #FFFFFF;
	      color: #333;
	      text-align: center;
	      line-height: 200px;		 
	    }
	    
	    .el-main {
	      background-color: #E9EEF3;
	      color: #333;
	      text-align: center;
	      line-height: 50px;
	    }
	    
	    body > .el-container {
	      margin-bottom: 40px;
	    }
	    
	    .el-container:nth-child(5) .el-aside,
	    .el-container:nth-child(6) .el-aside {
	      line-height: 260px;
	    }
	    
	    .el-container:nth-child(7) .el-aside {
	      line-height: 320px;
	    }
	    
	  .el-menu-vertical-demo:not(.el-menu--collapse) {
	      width: 200px;
	      min-height: 400px;
	    }
</style>
